<template>
  <div class="ratings" ref="ratings">
    <div class="content">
      <div class="overview">
        <div class="overview-left">
          <div class="score">{{seller.score}}</div>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star :score="seller.serviceScore" :size="36"></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <star :score="seller.foodScore" :size="36"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <split></split>
      <div class="seller-ratings">
        <ratingselect :ratings="ratings" :select-type="selectType" :select-text="selectText"
                      :only-content="onlyContent" @changeselectType="getselectType"
                      @changeSwitch="getSwitch"></ratingselect>
        <div class="ratings-wrapper">
          <ul>
            <li v-for="rating in ratings" class="rating-item border-1px"
                v-show="needShow(rating.rateType,rating.text)">
              <div class="avatar">
                <img :src="rating.avatar" width="28" height="28">
              </div>
              <div class="item-content">
                <div class="name">{{rating.username}}</div>
                <div class="star-wrapper">
                  <star :size="24" :score="rating.score"></star>
                  <span class="delivery">{{rating.deliveryTime}}分钟送达</span>
                </div>
                <div class="text">{{rating.text}}</div>
                <div class="recommend" v-show="rating.recommend &&rating.recommend.length">
                  <i class="icon-thumb_up"></i>
                  <ul class="recommend-list">
                    <li class="recommend-item" v-for="item in rating.recommend">{{item}}</li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import Vue from 'vue'
  import star from '../../components/star/star.vue'
  import split from '../../components/split/split.vue'
  import ratingselect from '../../components/ratingselect/ratingselect.vue'

  const ERR_OK = 0
  const ALL = 2
  /*const Negative = 1
   const Positive = 0*/
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data(){
      return {
        ratings: [],
        selectType: ALL,
        selectText: {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        },
        onlyContent: true
      }
    },
    created(){
      this.$http.get('/api/ratings').then((response) => {
        response = response.body
        if (response.errno === ERR_OK) {
          this.ratings = response.data
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll(this.$refs.ratings, {
                click: true
              })
            } else {
              this.scroll.refresh()
            }
          })
        }
      })
    },
    components: {
      star,
      ratingselect,
      split
    },
    methods: {
      getselectType(value){
        this.selectType = value
      },
      getSwitch(value){
        this.onlyContent = value
      },
      needShow(type, text){
        if (this.onlyContent && !text) {
          return false
        }
        if (this.selectType === ALL) {
          this.$nextTick(() => {
            this.scroll.refresh()
          })
          return true
        } else {
          this.$nextTick(() => {
            this.scroll.refresh()
          })
          return type === this.selectType
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .ratings
    position: absolute
    top: 174px
    bottom: 0
    left: 0
    width: 100%
    overflow: hidden
    background: #fff
    .overview
      display: flex
      padding: 18px 0
      background: #fff
      .overview-left
        flex: 0 0 137px
        padding: 6px 0
        width: 137px
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        text-align: center
        .score
          margin-bottom: 6px
          color: rgb(255, 153, 0)
          line-height: 28px
          font-size: 24px
        .title
          margin-bottom: 8px
          color: rgb(7, 17, 27)
          line-height: 12px
          font-size: 12px
        .rank
          color: rgb(147, 153, 159)
          line-height: 10px
          font-size: 10px
      .overview-right
        flex: 1
        padding-left: 12px
        .score-wrapper
          margin-bottom: 8px
          font-size: 0
          .title
            display: inline-block
            color: rgb(7, 17, 27)
            line-height: 18px
            font-size: 12px
          .star
            display: inline-block
            vertical-align: top
            margin: 0 12px
          .score
            display: inline-block
            color: rgb(255, 153, 0)
            line-height: 18px
            font-size: 12px
        .delivery
          line-height: 18px
          font-size: 0
          .title
            display: inline-block
            color: rgb(7, 17, 27)
            font-size: 12px
          .time
            display: inline-block
            margin-left: 12px
            color: rgb(147, 153, 159)
            font-size: 12px
    .seller-ratings
      .ratings-wrapper
        padding: 0 18px
        .rating-item
          display: flex
          padding: 18px 0
          border-1px(rgba(7, 17, 27, 0.1))
          .avatar
            flex: 0 0 28px
            width: 28px
          .item-content
            flex: 1
            margin-left: 12px
            .name
              color: rgb(7, 17, 27)
              line-height: 12px
              font-size: 10px
            .star-wrapper
              margin: 4px 0 6px
              font-size: 0
              .star
                display: inline-block
                vertical-align: top
                margin: 0 6px 0 0
              .delivery
                color: rgb(147, 153, 159)
                line-height: 12px
                font-size: 10px
            .text
              margin-bottom: 8px
              color: rgb(7, 17, 27)
              line-height: 18px
              font-size: 12px
            .recommend
              display: flex
              font-size: 0
              .icon-thumb_up
                flex: 0 0 16px
                width: 16px
                color: rgb(0, 160, 220)
                line-height: 16px
                font-size: 12px
              .recommend-list
                flex: 1
                .recommend-item
                  display: inline-block
                  margin: 0 8px 4px 0
                  padding: 0 6px
                  box-sizing: border-box
                  border: 1px solid rgba(7, 17, 27, 0.1)
                  border-radius: 1px
                  overflow: hidden
                  text-overflow: ellipsis
                  white-space: nowrap
                  width: 60px
                  height: 16px
                  line-height: 16px
                  text-align: center
                  color: rgb(147, 153, 159)
                  font-size: 9px
</style>

